<template>
	<div class="depute">
		<div class="header">
			<i class="fa"></i>
			<img src="../../../static/image/log.png" />
		</div>
		<div class="content">
			<div style="width: 100%;height: 1rem;"></div>
			<div class="d-banner"><img src="../../../static/image/entrust_bg1.jpg" /></div>
			<div class="inputphone">
				<div class="i-t-top">快速找办公室入口</div>
				<div class="i-t-number">
					<span>已有</span>
					<ul class="i-t-n-ul">
						<li v-for="item in numbers">{{item}}</li>
					</ul><span>人提交了委托申请</span>
				</div>
				<div class="i-t-input">
					<input type="text" id="tel" maxlength="11" v-model="tel" @keyup="telVal" placeholder="请输入您的手机号码" />
					<div class="i-t-ts">{{err}}</div>
				</div>				
				<div class="i-t-btn">
					<input type="button" @click="btntel" value="立即委托" />
				</div>
			</div>
			<div class="flow">
				<div class="f-top">找办公室流程</div>
				<div class="f-top-pic">
					<ul class="f-top-p-ul">
						<li>
							<i></i>
							<div><b>1</b>填写手机号码</div>
							<span class="f-t-p-line"></span>
						</li>
						<li>
							<i></i>
							<div><b>2</b>10分钟内客服回访</div>
							<span class="f-t-p-line"></span>
						</li>
						<li>
							<i></i>
							<div><b>3</b>专业顾问量身制定选址方案</div>
							<span class="f-t-p-line"></span>
						</li>
						<li>
							<i></i>
							<div><b>4</b>实地带看</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="why">
				<div class="w-top">为什么选择好租?</div>
				<div class="w-title">
					<p>&nbsp;&nbsp;&nbsp;&nbsp;好租网-领先的O2O互联网办公服务平台，致力于为中国企业提供从写字楼租赁到覆盖各类强相关服务领域的整体解决方案，打造O2O企业服务平台的生态闭环。</p>
				</div>
				<div>
					<ul class="w-ul">
						<li>
							<i></i><b>真</b><span>：所有房源实地勘测</span>
						</li>
						<li>
							<i></i><b>快</b><span>：一小时快速找房</span>
						</li>
						<li>
							<i></i><b>专</b><span>：专业顾问全面选址分析</span>
						</li>
						<li>
							<i></i><b>全</b><span>：注册、装修等企业服务一站全搞定</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="footernav">
			<button>电话咨询</button>
			<button>立即委托</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'depute',
		data() {
			return {
				numbers: [3, 9, 2, 6, 3, 0],
				tel:"",
				err:"",
				flag:""
			}
		},
		methods:{
			telVal(){
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(this.tel.length == 11){
					if(!myreg.test(this.tel)){
						this.err = "请输入正确的电话号码";
						var _this = this;
						setTimeout(function(){
							_this.err = "";
						},2000)
						this.flag = false;
					}else{
						this.flag = true;
					}
				}else{
					this.flag = false;
				}
				
			},
			btntel(){
				if(this.flag == false){
					this.err = "请输入正确的电话号码";
					var _this = this;
					setTimeout(function(){
						_this.err = "";
					},2000)
				}else{
					this.err = "委托成功，请稍等片刻";
					$(".i-t-ts").css("color","#666");
					var _this = this;
					setTimeout(function(){
						_this.err = "";
					},2000)
				}
			}
		}
	}
</script>

<style scoped>
	.footernav button:nth-of-type(2){
		width: 4rem;
		height: 0.8rem;
		background: #fd6720;
		border: none;
		outline: none;
		color: #fff;
		border-radius: 3px;
	}
	.footernav button:first-of-type{
		width: 3rem;
		height: 0.8rem;
		background: #0a0a0a;
		border: none;
		outline: none;
		color: #fff;
		border-radius: 3px;
	}
	.footernav{
		width: 100%;
		height: 1.3rem;
		background: rgba(0,0,0,0.5);
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.w-ul i{
		display: inline-block;
		width: 0.4rem;
		height: 0.4rem;
		background-image: url(../../../static/image/haozu_icon.png);
		background-repeat: no-repeat;
		-webkit-background-size: 2rem auto;
		-ms-background-size: 2rem auto;
		background-size: 2rem auto;
		background-position: -0.4rem -0.84rem;
		margin-right: 0.1rem;
		position: absolute;
	}
	.w-ul b{
		color: #fd6720;
		margin-left: 0.5rem;
	}
	.w-ul li{
		position: relative;
	}
	.w-ul{
		font-size: 0.3rem;
		padding-left: 0.3rem;
		box-sizing: border-box;
		margin-top: 0.3rem;
	}
	.w-title{
		width: 100%;
		font-size: 0.3rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
		color: #666;
	}
	.w-top{
		width: 100%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
	}
	.why{
		width: 7.1rem;
		height: 6.5rem;
		background: rgba(255, 255, 255, 0.9);
		margin-top: 0.2rem;
		margin-left: 0.2rem;
	}
	.f-t-p-line{
		position: absolute;
		display: inline-block;width: 0.05rem;
		height: 0.5rem;
		background: #fc5e20;
		top: 0.67rem;
		left: 0.32rem;
	}
	.f-t-p-line:last-of-type{
		height: 0.7rem;
	}
	.f-top-p-ul li div b{
		display: inline-block;
		width: 0.4rem;
		height: 0.4rem;
		line-height: 0.4rem;
		text-align: center;
		border-radius: 50%;
		background: #d9d9d9;
		color: #fff;
		margin-right: 0.2rem;
	}
	.f-top-p-ul li div{
		width: 5rem;
		height: 0.5rem;
		font-size: 0.3rem;
		margin-left: 0.3rem;
		background: #f9f9f9;
		text-align: left;
		margin-top: 0.15rem;
		color: #666666;
		padding-left: 0.3rem;
		box-sizing: border-box;
	}
	.f-top-p-ul li i{
		display: inline-block;
		width: 0.65rem;
		height: 0.8rem;
		background-image: url(../../../static/image/haozu_icon.png);
		background-repeat: no-repeat;
		-webkit-background-size: 2rem auto;
		-ms-background-size: 2rem auto;
		background-size: 2rem auto;
	}
	.f-top-p-ul li:first-of-type i{
		background-position: 0.03rem -1.33rem;
	}
	.f-top-p-ul li:nth-of-type(2) i{
		background-position: -0.66rem -1.33rem;
	}
	.f-top-p-ul li:nth-of-type(3) i{
		background-position: -1.35rem -1.33rem;
	}
	.f-top-p-ul li:nth-of-type(4) i{
		background-position: -1.35rem -0.5rem;
	}
	
	.f-top-p-ul li {
		display: flex;
		margin-bottom: 0.3rem;
		position: relative;
	}
	
	.f-top-pic {
		text-align: center;
		padding-left: 0.5rem;
		box-sizing: border-box;
		width: 100%;
	}
	
	.f-top {
		width: 100%;
		height: 0.9rem;
		line-height: 0.9rem;
		text-align: center;
		font-size: 0.4rem;
	}
	
	.flow {
		width: 7.1rem;
		height: 5.3rem;
		background: rgba(255, 255, 255, 0.9);
		margin-top: 5rem;
		margin-left: 0.2rem;
	}
	
	.i-t-btn input {
		width: 95%;
		height: 0.9rem;
		text-align: center;
		border: 0.01rem solid #dddddd;
		font-size: 0.35rem;
		background: #fd6720;
		color: #fff;
	}
	
	.i-t-btn {
		text-align: center;
		width: 100%;
		height: 0.8rem;
		margin-top: 1rem;
	}
	
	.i-t-input input {
		width: 95%;
		height: 0.8rem;
		text-align: center;
		border: 0.01rem solid #dddddd;
		font-size: 0.35rem;
	}
	
	.i-t-input {
		text-align: center;
		width: 100%;
		height: 1rem;
		padding-top: 0.5rem;
		box-sizing: border-box;
	}
	
	.i-t-ts{
		width: 100%;
		height: 0.5rem;
		margin-top: 0.1rem;
		font-size: 0.25rem;
		text-align: center;
		line-height: 0.5rem;
		color: red;
	}
	
	.i-t-number span:first-of-type {
		float: left;
		margin-right: 0.3rem;
	}
	
	.i-t-number {
		width: 100%;
		font-size: 0.35rem;
		color: #262313;
		text-align: center;
		padding: 0.2rem 0.3rem 0 0.3rem;
		box-sizing: border-box;
	}
	
	.i-t-n-ul {
		display: flex;
		color: #262313;
	}
	
	.i-t-n-ul li {
		width: 0.5rem;
		height: 0.6rem;
		line-height: 0.6rem;
		text-align: center;
		margin: 0 0.15rem;
		padding: 0 0.05rem;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px #888888;
		border-radius: 3px;
		font-size: 0.25rem;
	}
	
	.i-t-top {
		width: 100%;
		height: 0.85rem;
		line-height: 0.85rem;
		text-align: center;
		color: #262313;
		font-size: 0.35rem;
	}
	
	.fa {
		position: absolute;
		top: 0;
		left: 0;
		width: 44px;
		height: 44px;
		text-align: center;
		line-height: 999em;
		overflow: hidden;
	}
	
	.fa::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		border-top: solid 2px #fb3;
		border-right: solid 2px #fb3;
		margin: -6px 0 0 -6px;
		-webkit-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	
	.inputphone {
		position: absolute;
		width: 7.1rem;
		height: 5.3rem;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		left: 0.2rem;
		margin-top: -0.8rem;
	}
	
	.d-banner {
		width: 100%;
		height: 3.5rem;
	}
	
	.content {
		background: #fcfcfc;
		overflow: hidden;
	}
	
	.header img {
		width: 1rem;
	}
	
	.header {
		width: 100%;
		height: 1rem;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		text-align: center;
		padding-top: 0.15rem;
		box-sizing: border-box;
		z-index: 999;
	}
</style>